<template>
  <navbar title="确认支付" :isBack="true"></navbar>
  <loading v-if="!orderInfo"></loading>
  <template v-else>
    <view class="header">
      <image class="bg" src="/pagesA/static/image/12.png"></image>
      <view class="price flex-direction-column">
        <text>报名金额</text>
        <text>¥{{ orderInfo.price }}</text>
      </view>
    </view>
    <view class="name flex-direction-coulum">
      <view class="title  two-line">
        {{ orderInfo.active_name }}
      </view>
      <view class="flex-space-between">
      	<view class="group">{{ orderInfo.group_name }}</view>
		<view class="text_p">
			¥{{ orderInfo.price }}
		</view>
      </view>
    </view>
    <view class="way flex">
      <image src="/pagesA/static/image/13.png"></image>
      <text>微信支付</text>
    </view>
    <view class="btn" @click="getOrderPayApi()">
      <text>立即支付</text>
    </view>
  </template>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getCashier, getOrderPay } from '@/service/api/order'
import tools from '@/utils/tools'

let orderId = 0
let orderInfo = ref(null)

// 收银台
const getCashierApi = async (id) => {
  const { msg } = await getCashier({ id })
  orderInfo.value = msg
}

// 拉起支付
const getOrderPayApi = async () => {
  const { msg, code } = await getOrderPay({ id: orderId })
  if (code == 0) return tools.showToast(msg)
  tools.requestPayment(msg).then(() => {
    // tools.showToast('支付成功')

    // active_type 1 2 赛事 3 活动
    let params = {
      type: 0
    }

    setTimeout(() => {
      tools.navTo('/pagesA/order/payState?params=' + JSON.stringify(params))
      // tools.getPage()
    }, 500)
    uni.removeStorageSync('entryInfo')
  })
}

onLoad((option) => {
  orderId = JSON.parse(option.params).id
  // 收银台
  getCashierApi(orderId)
})
</script>

<style>
page {
  background-color: #f9f9f9;
}
</style>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 260rpx;
  position: relative;
  .bg {
    width: 100%;
    height: 100%;
  }
  .price {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    justify-content: center;
    align-items: center;
    position: absolute;
    text {
      &:nth-child(1) {
        height: 34rpx;
        font-size: 24rpx;
        line-height: 34rpx;
      }
      &:nth-child(2) {
        height: 80rpx;
        font-size: 56rpx;
        font-weight: bold;
        margin-top: 18rpx;
        line-height: 50rpx;
      }
    }
  }
}
.name {
  // text-align: center;
  padding: 34rpx 24rpx;
  background-color: #fff;
  justify-content: center;
  .title {
    font-size: 32rpx;
	font-weight: bold;
    line-height: 44rpx;
	border-bottom: 1px solid #eee;
	padding-bottom: 18rpx;
    image {
      width: 86rpx;
      height: 36rpx;
      margin-right: 10rpx;
    }
  }
  .text_p{
	  height: 40rpx;
	  font-size: 28rpx;
	  font-family: PingFang SC;
	  font-weight: 400;
	  line-height: 40rpx;
	  color: #F24C55;
	  opacity: 1;
  }
  .group {
    margin-top: 16rpx;
    font-size: 30rpx;
    color: #777777;
  }
}
.way {
  margin-top: 20rpx;
  padding: 28rpx 36rpx;
  background-color: #fff;
  image {
    width: 46rpx;
    height: 45rpx;
    margin-right: 14rpx;
  }
  text {
    height: 44rpx;
    font-size: 32rpx;
    line-height: 44rpx;
  }
}
.btn {
  bottom: 0;
  position: fixed;
  background-color: #fff;
  padding: 22rpx 36rpx 60rpx 36rpx;
  text {
    color: #fff;
    width: 680rpx;
    height: 96rpx;
    line-height: 96rpx;
    font-size: 32rpx;
    text-align: center;
    border-radius: 6rpx;
    background: linear-gradient(270deg, #354678 0%, #5062A7 100%);
  }
}
</style>
